<template>
  <view v-for="(item, index) in tempInfo" :key="index">
    <view v-if="item.ActionType == 'PrintText'">
      <!-- 这里的字体大小，字体居中配置只做了简单逻辑判断 -->
      <view
        class="tick-text"
        :style="{
          fontWeight: getFontStyle(item, 'weight'),
          fontSize: getFontStyle(item, 'textSize'),
          textAlign: getFontStyle(item, 'alignment'),
        }"
      >
        {{ item.Parameter }}</view
      >
    </view>
    <view v-else-if="item.ActionType == 'PrintDashLine'">
      <u-line margin="0.5em 0" dashed color="#333" />
    </view>
    <view v-else> </view>
  </view>
</template>
<script setup>
import { computed } from "vue";
import POSTConst from "./POSTConst";
import POSConst from "./POSTConst";

const props = defineProps({
  info: {
    type: Array,
    default: () => [],
  },
  index: Number,
  editor: {
    type: Array,
    default: () => [],
  },
});

const tempInfo = computed(() => {
  return [...props.info];
});

const tempEditor = computed(() => {
  return [...props.editor];
});

// 获取 fontWeight 和 fontSize
const getFontStyle = (item, key) => {
  try {
    const config = item.Config;
    if (config) {
      let alignment = 'left';
      const notNormal = config?.textSize > (POSTConst.TXT_1HEIGHT | POSTConst.TXT_1WIDTH);
      switch (key) {
        case "weight":
          return notNormal ? "bold" : "normal";
        case "textSize":
          return notNormal ? (config?.textSize) + 'px' : "normal";
        case "alignment":
          if (config?.alignment === POSConst.ALIGNMENT_RIGHT) {
            alignment = 'right';
          } else if (config?.alignment === POSConst.ALIGNMENT_CENTER) {
            alignment = 'center';
          }
          return alignment;
      }
    } else {
      return "normal"
    }
  } catch (error) {
    console.error(error);
    return "normal";
  }
};
</script>
<style lang="scss" scoped>
.tick-text {
  // white-space: pre-wrap;
  font-family: monospace; /* 使用等宽字体 */
  white-space: pre; /* 保留空白和换行 */
}
</style>
